<!--
 * @Author: 宋杰
 * @Date: 2020-12-29 11:02:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-18 09:48:31
 * @Description: 一家十一口(猜一字) 经营项目
-->
<template>
  <div class="divBox">
    <!-- 机构经营项目一览 -->
    <div class="div3">
      <div class="topBox3">
        <div class="topBox2 ">机构经营项目一览</div>
        <div class="topBox3_sou">
          <!-- 日期 -->
          <div >
            <span>日期: </span>
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
          <div>
            <span>开班信息: </span>
            <el-select
              v-model="value"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="开班信息"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>

      <div class="conBox3">
        <div
          class="conBoxList"
          v-for="(item, index) in conBox3List"
          :key="index"
          :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
        >
          <div
            class="conBox3_1"
            :class="item.shuxing === '暂停' ? 'orangecolor' : ''"
          >
            <span>{{ item.shuxing }}</span>
          </div>
          <div class="conBox3_3">
            <div>{{ item.banji }}</div>
            <div>{{ item.name }}</div>
          </div>
          <div class="conBox3_2">
            <div>教务人员</div>
            <div>{{ item.renyuan }}</div>
          </div>
          <div class="conBox3_2">
            <div>开设时间</div>
            <div>{{ item.time }}</div>
          </div>
          <!-- 详情 -->
          <el-button type="primary" plain size="mini" round>关闭</el-button>
        </div>
        <!-- 上传 -->
        <div class="shanchuanbox">
          <el-button type="primary" plain>上传</el-button>
        </div>
      </div>
    </div>
    <!-- 机构经营项目一览 end -->
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      // 机构项目信息一栏
      // 搜索
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      // 列表
      conBox3List: [
        {
          id: "0",
          fenshu: "60",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "王安生",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "刘晶晶",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "语文培训班"
        },
        {
          id: "2",
          fenshu: "60",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "张顺",
          time: "2020.2.3",
          leixin: "视频",
          renyuan: "王家卫",
          kaikeshijian: "2020.1.5",
          shuxing: "开启",
          banji: "数学培训班"
        },
        {
          id: "3",
          fenshu: "80",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "党舒",
          time: "2020.4.3",
          leixin: "视频",
          renyuan: "韩冰",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "外语培训班"
        }
        // {
        //   id: "4",
        //   fenshu: "90",
        //   jigou: "xxx培训,vxxx培训,xxx培训",
        //   name: "李教授",
        //   time: "2020.8.3",
        //   leixin: "视频",
        //   renyuan: "李教授",
        //   kaikeshijian: "2020.4.5",
        //   shuxing: "暂停",
        //   banji: "培训二班"
        // }
      ],
      // 机构项目信息一栏 end

      // 日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value2: ""
    };
  },

  methods: {
    // 机构项目信息一栏
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  },

  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  padding: 1%  5% 9% 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-top: 57px;
}

.div3 {
  background: #fff;
  width: 100%;
  /* min-width: 800px; */
  /* min-height: 220px; */
  border-radius: 4px;
  overflow: hidden;
  /* margin-bottom: 20px; */
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}

.conBoxList {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 {
  flex: 0.5 !important;
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid rgb(79, 243, 153);
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: rgb(79, 243, 153);
}
.orangecolor {
  border: 1px solid rgb(240, 147, 40) !important;
  color: rgb(240, 147, 40) !important;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
.shanchuanbox {
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.shanchuanbox > :nth-child(1) {
  width: 90px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  /* line-height: 32px; */
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
position: absolute; right: 0; margin-right: 6%;
}
.topBox3_sou >>>.el-input{
    width: 160px;
}
.topBox3_sou >:nth-child(1){
    margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h22-bg.png) no-repeat;
    /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
</style>
